<template>
    <el-container>
        <!-- <el-header class="header-tabs">
                <el-tabs type="card" v-model="search.status" @tab-change="activityStatusTabChange">
                    <el-tab-pane label="所有" :name="0"></el-tab-pane>
                    <el-tab-pane label="即将开始" :name="1"></el-tab-pane>
                    <el-tab-pane label="进行中" :name="2"></el-tab-pane>
                    <el-tab-pane label="已结束" :name="3"></el-tab-pane>
                    <el-tab-pane label="已取消" :name="-1"></el-tab-pane>
                </el-tabs>
            </el-header> -->
        <el-header>
            <div class="left-panel">
                <div class="right-panel-search">
                    <el-input v-model="search.keyword" placeholder="订单号" clearable></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    <el-button :loading="exportLoading" @click="exportList">导出</el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="list.apiObj" :params="list.params" row-key="id" stripe>
                <!-- <el-table-column label="#ID" prop="id" width="50"></el-table-column> -->
                <el-table-column label="订单号" prop="ordernum" width="200"></el-table-column>
                <el-table-column label="报名费" prop="price" width="100"></el-table-column>
                <el-table-column label="报名人数" prop="num" width="100"></el-table-column>
                <el-table-column label="用户" prop="user.username" width="120"></el-table-column>
                <el-table-column label="状态" prop="status_str" width="100">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status > 0">已支付</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.status == 0">未支付</el-tag>
                        <el-tag v-else>已退款/已取消</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="取消/退款原因" prop="close_reason" width="250"></el-table-column>
                <el-table-column label="支付时间" prop="pay_time" width="150"></el-table-column>
                <el-table-column label="下单时间" prop="create_time" width="180"></el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="180">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small"
                                @click="detail(scope.row, scope.$index)">详情</el-button>
                            <el-popconfirm title="确定退款吗？" @confirm="refund(scope.row, scope.$index)"
                                v-if="scope.row.status == 10">
                                <template #reference>
                                    <el-button text type="primary" size="small">退款</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>

            </scTable>
        </el-main>
    </el-container>

    <detail-dialog v-if="dialog.detail" ref="detailDialog" @closed="dialog.detail = false"></detail-dialog>
</template>

<script>
import detailDialog from './detail'
export default {
    name: 'registrationList',
    emits: ['closed'],
    components: {
        detailDialog
    },
    props: {
        activity: {
            type: Object,
            default: null
        }
    },
    data () {
        return {
            dialog: {
                detail: false
            },
            list: {
                apiObj: this.$API.app.activity.registration.list,
                params: {
                    activity_id: this.activity.id
                }
            },
            search: {
                status: 0,
                keyword: null
            }
        }
    },
    methods: {

        open () {
            this.visible = true;
            this.drawerTitle = this.activity.name
            return this;
        },
        detail (row) {
            console.log(row)
            this.dialog.detail = true
            this.$nextTick(() => {
                this.$refs.detailDialog.open().setData(row)
            })
        },

        refund () {

        },

        //搜索
        upsearch () {
            this.$refs.table.upData(this.search);
        },

        exportList () {
            const params = { action: 'export', ...this.search, activity_id: this.activity.id }
            this.downloadFile(this.list.apiObj, '报名列表-' + (new Date()).getTime(), params)
        },
        downloadFile (apiObj, fileName, data = {}) {
            this.downLoading = true
            var _this = this
            console.log(fileName)
            apiObj.get(data, {
                responseType: 'blob',
                onDownloadProgress (e) {
                    if (e.lengthComputable) {
                        _this.downLoadProgress = parseInt(e.loaded / e.total * 100)
                    }
                }
            }).then(res => {
                this.downLoading = false
                this.downLoadProgress = 0
                let url = URL.createObjectURL(res);
                let a = document.createElement("a")
                a.style = "display: none"
                a.target = "_blank"
                a.download = fileName + ".xls"
                a.href = url
                document.body.appendChild(a)
                a.click()
                document.body.removeChild(a)
                URL.revokeObjectURL(url)
            }).catch(err => {
                this.downLoading = false
                this.downLoadProgress = 0
                this.$notify.error({
                    title: '下载文件失败',
                    message: err
                })
            })
        },

        onSaveSuccess () {
            this.refresh();
        },
        //本地更新数据
        refresh () {
            this.$refs.table.refresh()
        }
    }
}
</script>

<style></style>
